<template>
  <FormItemWrapper :component="component">
    <Select v-model="formData[component.compConfigData.fieldConfig.bindingFieldName]"
            :multiple="component.compConfigData.widgetConfig.multiple"
            :disabled="component.compConfigData.widgetConfig.disabled"
            :clearable="component.compConfigData.widgetConfig.clearable"
            :filterable="component.compConfigData.widgetConfig.filterable"
            :size="component.compConfigData.widgetConfig.size"
            :placeholder="component.compConfigData.widgetConfig.placeholder"
            :not-found-text="component.compConfigData.widgetConfig.notFoundText"
            :label-in-value="component.compConfigData.widgetConfig.labelInValue"
            :placement="component.compConfigData.widgetConfig.placement"
    >
      <Option v-for="item in component.compConfigData.ds_resultObj" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
  </FormItemWrapper>
</template>

<script>
import FormLayoutCommonUtil from "@/utils/FormLayoutCommonUtil";
import FormWidgetMixin from "@/mixin/FormWidgetMixin";

export default {
  name: "FormItemSelectWidget",
  mixins: [FormWidgetMixin],
  attr: {
    version: '1.0',
    configDataTemp: Object.assign({

      fieldConfig: FormLayoutCommonUtil.buildWidgetFieldConfig(),
      formItemConfig: FormLayoutCommonUtil.buildFormItemConfig({}, '下拉选择器'),
      widgetConfig: {
        multiple: false,
        disabled: false,
        clearable: false,
        filterable: false,
        size: 'default',
        placeholder: '',
        notFoundText: '无匹配数据',
        labelInValue: false,
        placement: 'bottom-start',
        elementId: '',
        prefix: '',
      },
      widgetEventCodeConfig: FormLayoutCommonUtil.buildWidgetEventCodeConfig({
        onChange: {remark: '数据改变时触发', resultValues: ['value'], code: ''},
        onQueryChange: {remark: '搜索词改变时触发', resultValues: ['query'], code: ''},
        onClear: {remark: '点击清空按钮时触发', resultValues: [], code: ''},
        onOpenChange: {remark: '下拉框展开或收起时触发', resultValues: ['value'], code: ''},
      }),
      ds_resultObj: [
        {
          value: 'zhangsan',
          label: '张三'
        },
        {
          value: 'lisi',
          label: '李四'
        },
        {
          value: 'wangwu',
          label: '王五'
        },
      ]

    })
  },
  data() {
    return {

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.runWidgetOnMountedEventCode()
    },

  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>
